/**
 * 清理浮动
 */
.clear:before,
.clear:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
}

/**
 * 圆形
 */
.round {border-radius: 50%;}

/**
 * 键盘
 */
kbd {
	padding: 2px 4px;
	font-size: 90%;
	color: #fff;
	background-color: #555;
	border-radius: 3px;
}

/**
 * 颜色
 */
@mixin buildColors($color, $key) {
	.ft-#{$key} {color: $color;}
	.bg-#{$key} {
		color:#fff;
		background-color: $color;
	}
}

@include buildColors($color-normal, "normal");
@include buildColors($color-info, "info");
@include buildColors($color-success, "success");
@include buildColors($color-warning, "warning");
@include buildColors($color-danger, "danger");

/**
 * 对齐
 */
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.txt-l {text-align: left;}
.txt-c {text-align: center;}
.txt-r {text-align: right;}

/**
 * 外边距
 */
$margin-quantity: 5;
@mixin buildAtomMargin($dire) {
	$dire-word: top;

	@if $dire == r {
		$dire-word: right;
	} @else if $dire == b {
		$dire-word: bottom;
	} @else if $dire == l {
		$dire-word: left;
	}

	@for $i from 1 through 4 {
		$quantity: $margin-quantity * $i;
		$selector: $quantity;

		@if $quantity < 10 {
			$selector: 0#{$quantity};
		}

		.m#{$dire}#{$selector} {margin-#{$dire-word}: $quantity * 1px;}
	}
}

@include buildAtomMargin(t);
@include buildAtomMargin(r);
@include buildAtomMargin(b);
@include buildAtomMargin(l);
